<template>
	<div class="wy-main business-labour">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >发布劳务信息</span>
					<router-link to="/business/labour/manage">
						<a-button class="title-button">管理我的劳务信息</a-button>
					</router-link>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-row class="tips">
				<a-col :span="12">
					<h3>发布信息</h3>
				</a-col>
			</a-row>
			<div style="padding: 20px;">
				<a-row>
					<a-col :span="16">
						<a-form-item label="标题" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '标题不能为空！',}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="16">
						<a-form-item label="劳务地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '标题不能为空！',}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="16">
						<a-form-item label="劳务信息" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-input  v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '标题不能为空！',}]}]" />
							<b style="padding: 10px;">m²</b>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="16">
						<a-form-item label="价格" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-input  v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '标题不能为空！',}]}]" />
							<b style="padding: 10px;">元/m²/每天</b>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="16">
						<a-form-item label="上传图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<span>您尚未上传</span>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="16">
						<a-form-item label="补充说明" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-textarea  :autosize="{ minRows: 4, maxRows: 6 }" />
							<p>请输入30-2000字，建议您详细填写</p>
						</a-form-item>
					</a-col>
				</a-row>
				
			</div>
			<a-row class="tips">
				<a-col :span="12">
					<h3>基本信息</h3></a-col>
			</a-row>
			<div style="padding: 20px;">
				<a-row>
					<a-col :span="12">
						<a-form-item label="公司名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="[ 'enterprisename']" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="联系人" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '出发地不能为空！',}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item label="联系电话" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="[ 'enterprisename',{ rules: [ {required: true, message: '出发地不能为空！',}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-divider/>
				<a-row>
					<a-col :span="6">
					</a-col>
					<a-col :span="4">
						<a-button type="primary" html-type="submit" block> 立即发布 </a-button>
					</a-col>
					<a-col :span="10">
					</a-col>
				</a-row>
			</div>
		</a-form>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				headers: {
					authorization: 'authorization-text',
				},
				previewVisible: false,
				previewImage: '',
				fileList: [{
					uid: '-1',
					name: 'xxx.png',
					status: 'done',
					url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
				}],
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			handleCancel() {
				this.previewVisible = false
			},
			handlePreview(file) {
				this.previewImage = file.url || file.thumbUrl
				this.previewVisible = true
			},
			//		    handleChange ({ fileList }) {
			//		      this.fileList = fileList
			//		    },
			// 上传图片
			handleChange(info) {
				if(info.file.status !== 'uploading') {
					console.log(info.file, info.fileList);
				}
				if(info.file.status === 'done') {
					this.$message.success(`${info.file.name} file uploaded successfully`);
				} else if(info.file.status === 'error') {
					this.$message.error(`${info.file.name} file upload failed.`);
				}
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.business-labour {
		.tips {
			background: #ECEFF4;
			padding: 10px 10px 0 10px;
		}
		.clearfix {
			margin-top: 10px;
		}
		.ant-upload-select-picture-card i {
			font-size: 32px;
			color: #999;
		}
		.ant-upload-select-picture-card .ant-upload-text {
			margin-top: 8px;
			color: #666;
		}
	}
</style>